<template>
    <el-tabs tab-position="left">
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <LocationInformation />
                    </el-icon>
                    <span> 快速访问</span>
                </span>
            </template>
            <ShortCut></ShortCut>
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span> 我的文稿</span>
                </span>
            </template>
            <MyFiles></MyFiles>
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <StarFilled />
                    </el-icon>
                    <span> 我的收藏</span>
                </span>
            </template>
            <MyCollections></MyCollections>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import axios from 'axios';
import qs from 'qs';
import { RouterLink, RouterView } from 'vue-router'
import ShortCut from './homeViews/ShortCut.vue'
import MyFiles from './homeViews/MyFiles.vue'
import MyCollections from './homeViews/MyCollections.vue'
import 'animate.css';

const isLogin = () => {
    const options = {
        method: 'POST',
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            'stu-token': localStorage.getItem("stu-token")
        },
        url: 'http://127.0.0.1:8082/sso/isLogin'
    }
    axios(options).then(res => {
        if (res.data == false) {
            location.href = 'login.html?back=' + encodeURIComponent(location.href)
        }
    })
}
// isLogin()
</script>

<style scoped>
.el-tabs {
    height: 100%;
    --el-tabs-header-height: 55px;
}

:deep().el-tabs__nav {
    margin-top: 10px;
}

:deep().el-tabs__nav .is-active {
    border-radius: 10px;
    margin-right: 7px;
    background-color: rgba(166, 222, 250, .36);
}


:deep().el-tabs__item {
    font-size: small;
    font-weight: bold;
}

:deep().el-tabs__content {
    height: 100%;
    overflow-y: scroll !important;
}

.el-tab-pane {
    height: auto;
}

.el-message-box__btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
}

/* .el-container {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0;
} */

/* .el-header {
    width: 100%;
    height: 66px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background: linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7); 
} */


/* .el-text {
    --el-text-font-size: 2rem;
    color: var(--el-color-primary-dark-2);
    text-align: center;
    display: block;
}

.me-icon {
    color: var(--el-color-primary-dark-2);
    width: 80%;
    margin: auto;
} */
</style>